<!-- 歌曲列表组件 -->
<template>
	<view class="m-sglst">
		<view @click="playSong(item.id, item.song.fee)" class="m-sgitem" v-for="item in songList" :key="item.id">
			<view class="sgfr f-bd f-bd-btm">
				<view class="sgchfl">
					<view class="f-thide sgtl">
						{{ item.name }}
						<span style="color: #888; margin-left: 4px" v-if="item.song.alias[0]">({{ item.song.alias[0] }})</span>
					</view>
					<view class="f-thide sginfo">
						<i class="u-hmsprt sghot" v-if="item.song.sqMusic"></i>
						{{ item.song.artists[0].name }} - {{ item.song.album.name }}
					</view>
				</view>
				<view class="sgchfr">
					<span class="u-hmsprt sgchply"></span>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { newMusicAPI } from '@/api';
import { playSong } from '@/utils/dedicated';
export default {
	name: 'MusicList',
	data() {
		return {
			songList: [] // 最新音乐数据
		};
	},
	created() {
		newMusicAPI({ limit: 10 }).then((res) => {
			this.songList = res.result;
		});
	},
	methods: {
		// 歌曲播放限制
		playSong
	}
};
</script>

<style lang="scss" scoped>
.m-sglst {
	position: relative;
	.m-sgitem {
		display: flex;
		padding-left: 10px;
		.sgfr {
			flex: 1 1 auto;
			display: flex;
			position: relative;
		}
		.sgchfl {
			padding: 6px 0;
			width: 0;
			flex: 1 1 auto;
			.f-thide {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: normal;
			}
		}
		.sgchfr {
			display: flex;
			align-items: center;
			padding: 0 10px;
		}
		.f-bd-btm {
			border-bottom: 1px solid rgb(226, 226, 227);
		}
		.f-bd:after {
			position: absolute;
			z-index: 2;
			content: '';
			top: 0;
			left: 0;
			pointer-events: none;
			box-sizing: border-box;
			transform-origin: top left;
			border: 0 solid rgba(0, 0, 0, 0.1);
		}
		.sgtl {
			font-size: 17px;
			color: #333;
		}
		.sginfo {
			font-size: 12px;
			color: #888;
		}
		.sghot {
			display: inline-block;
			width: 12px;
			height: 8px;
			margin-right: 4px;
		}
		.sgchply {
			display: inline-block;
			width: 22px;
			height: 22px;
			background-position: -24px 0;
		}
	}
	.u-hmsprt {
		background: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=') no-repeat;
		background-size: 166px 97px;
	}
}
</style>
